﻿@{
    ViewBag.Title = "图库";
    Layout = "~/Views/Shared/_BackStageLayout.cshtml";
    List<CompanyModel> companylist = (List<CompanyModel>)ViewData["Data"];
    List<Gallery> gallerys = (List<Gallery>)ViewData["Gallery"];
}

<link href="/Content/assets/plugins/isotope/isotope.css" rel="stylesheet" />
<link href="/Content/assets/plugins/lightbox/css/lightbox.css" rel="stylesheet" />
<link href="/Content/assets/cSS/fileinput.min.css" rel="stylesheet" />
<link href="/Content/assets/plugins/bootstrap-combobox/css/bootstrap-combobox.css" rel="stylesheet" />
<div id="content" class="content">
    <!-- begin page-header -->
    <h1 class="page-header">
        图库 <small></small>
        <button type="button" class="btn btn-sm btn-primary start " id="add">
            <i class="fa fa-upload"></i>
            <span>上传图片</span>
        </button>
        <button type="button" class="btn btn-sm btn-primary start " id="download">
            <i class="fa fa-download"></i>
            <span>下载图片</span>
        </button>
    </h1>
    <!-- end page-header -->

    <div id="options" class="m-b-10">
        <span class="gallery-option-set" id="filter" data-option-key="filter">
            <a href="#show-all" class="btn btn-default btn-xs active" data-option-value="*">
                全部
            </a>
            @foreach (CompanyModel company in companylist)
            {
                <a class="btn btn-default btn-xs" data-option-value=".@company.CompanyId">
                    @company.Name
                </a>
            }
        </span>
    </div>
    <div id="gallery" class="gallery">
        @foreach (Gallery gallery in gallerys)
        {
            <div class="image @gallery.CompanyId ">
                <div class="image-inner">
                    <a href="@gallery.FilePath" data-lightbox="@gallery.CompanyId">
                        <img src="@gallery.FilePath" alt="" />
                    </a>
                    <p class="image-caption">
                        <input type="checkbox" class="imgurl" value="@gallery.FilePath" style="vertical-align:middle; "  />
                         @gallery.ImageName
                    </p>
                </div>
                <div class="image-info">
                    <div class="pull-right">
                        <a class="btn btn-default btn-sm" href="javascript:;">@gallery.CompanyName</a>
                    </div>
                    <div class="rating" url="@gallery.FilePath" uid="@gallery.Id">
                        <a href="javascript:;" class="btn btn-white btn-sm copy" title="复制图片路径"><i class="fa fa-copy "></i></a>
                        <a href="javascript:;" class="btn btn-white btn-sm del" title="删除"><i class="fa fa-times"></i></a>
                    </div>
                    <div class="desc">
                        @gallery.Description
                    </div>
                </div>
            </div>
        }

    </div>
</div>


<div class="modal fade upload">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">上传图片</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <!-- begin col-4 -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>用户选择</label>
                            <div class="controls">
                                <select class="combobox" id="combobox">
                                    <option value="">请选择用户</option>
                                    @foreach (var company in companylist)
                                    {
                                        <option value="@company.CompanyId">@company.Name</option>
                                    }
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- end col-6 -->
                </div>
                <!-- begin row -->
                <div class="row" id="uploadContent">
                    <!-- begin col-4 -->
                    <div class="col-md-10">
                        <div class="form-group">
                            <label>图片名称</label>
                            <div class="controls">
                                <input type="text" name="imageName" id="imageName" placeholder="图片名称" class="form-control width-300">
                            </div>
                            <label>图片描述</label>
                            <div class="controls">
                                <textarea id="description" name="description" class="form-control width-300" rows="4" placeholder="图片描述"></textarea>
                            </div>
                            <label>图片上传</label>
                            <div class="controls">
                                <input id="file-Portrait1" type="file">
                            </div>
                        </div>
                    </div>
                   
                </div>
                <!-- end row -->
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="save" data-dismiss="modal">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

@section footer {

    <script src="/Content/assets/plugins/isotope/jquery.isotope.min.js"></script>
    <script src="/Content/assets/plugins/lightbox/js/lightbox-2.6.min.js"></script>
<script src="/Content/assets/plugins/bootstrap-combobox/js/bootstrap-combobox.js"></script>
<script src="/Content/assets/js/fileinput.min.js"></script>
    <script src="/Content/assets/js/gallery.demo.min.js"></script>
<script src="/Content/assets/js/ZeroClipboard.js"></script>


    <script>
        $(document).ready(function () {
            App.init();
            Gallery.init();
            $(".combobox").combobox();
            $("#uploadContent").hide();

            $(".combobox").blur(function () {
                if ($(".combobox").val() == "") {
                    $("#uploadContent").hide();
                } else {
                    document.cookie = 'companyId='+$("#combobox").val();
                    $("#uploadContent").show();
                }
            });

            $(".combobox").change(function () {
                if ($(".combobox").val() == "") {
                    $("#uploadContent").hide();
                } else {
                    document.cookie = 'companyId=' + $("#combobox").val();
                    $("#uploadContent").show();
                }
            });


            $("#save").click(function () {
                var imageName = $("#imageName").val();
                var description = $("#description").val();
                var id = client.cookie.getCookie("fileId");
                if (id == null||id == "")
                {
                    alert("请先上传图片");
                    return false;
                }
                if (imageName == "")
                {
                    alert("请输入图片名称");
                    return false;
                }
                if (description == "") {
                    alert("请输入图片描述");
                    return false;
                }

                client.api.modifyImage({
                    "Id": id,
                    "ImageName": imageName,
                    "Description": description,
                },
                   function (result) {
                       alert(result.ReMsg);
                       if (result.ReCode == "1000") {
                           client.cookie.delCookie("fileId");
                           window.location.reload();
                           return false;
                       }
                   },
                 function (result) { });
            });

            $(".del").click(function () {
                if (confirm("您确定要删除吗？")) {
                    var id = $(this).parent().attr("uid");
                    client.api.deleteImage({
                        "id": id
                    },
                   function (result) {
                       alert(result.ReMsg);
                       if (result.ReCode == "1000") {
                           window.location.reload();
                           return false;
                       }
                   },
                 function (result) { });
                }
            });

            $(".copy").click(function () {
                var url = $(this).parent().attr("url");
                prompt("请复制图片路径地址", (location.host+url).replace(/\\/g,"/"));
            });

            $("#file-Portrait1")
                              .fileinput({
                                  language: 'zh', //设置语言
                                  uploadUrl: "/BackStage/UploadImg", //上传的地址
                                  allowedFileExtensions: ['jpg', 'png', 'gif', 'bmp', 'ico'], //接收的文件后缀
                                  showUpload: true, //是否显示上传按钮
                                  showCaption: false, //是否显示标题
                                  browseClass: "btn btn-primary", //按钮样式
                                  maxFileCount: 1,
                                  enctype: 'multipart/form-data'
                              }).on("fileuploaded", function (event, data) {
                                  if (data.response) {
                                      alert('处理成功');
                                  };
                              });
                                 

            $("#add").click(function () {
                $(".upload").modal();
            });


            $("#download").click(function () {
                var arr = new Array()
                $(".imgurl:checked").each(function () {
                    arr.push($(this).val());
                });
                if (arr.length == 0)
                {
                    alert("请选择图片");
                    return false;
                }


                client.api.downloadImage({
                    "filenames": arr
                },
                      function (result) {
                          if (result.ReCode == "1000") {
                              window.open(result.ReData);
                              return false;
                          } else {
                              alert(result.ReMsg);
                              return false;
                          }
                      },
                      function (result) { });
            });



        });
</script>
}
